<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <!-- 搜索条件开始 -->
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>查询条件</legend>
            </fieldset>
    <blockquote class="layui-elem-quote">
            <form class="layui-form" method="post" id="searchFrm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择年份:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
                    </div>
                </div>
            </form>
    </blockquote>
            <!-- 搜索条件结束 -->
            <div id="container" style="height: 400px"></div>

    </div>
</div>

</body>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use([ 'jquery', 'layer', 'form', 'table','laydate','element'  ], function() {
        var $ = layui.jquery;
        var laydate=layui.laydate;

        laydate.render({
            elem:'#year',
            type:'year',
            value:new Date()
        });
        $("#doSearch").click(function(){
            getData();
        });

        function getData(){
            var year=$("#year").val();
            if(year===""){
                year=new Date().getFullYear();
            }
            //门诊月度统计
            $.post("/finance/reportYearFinance",{year:year},function(data){

                   //alert(data);

                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title : {
                        text: '医院年度额统计',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        //  data: [150, 230, 224, 218, 135, 147, 260],
                        data: data,
                        type: 'line' //折线图
                    }]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
        }
        getData();
    })
</script>

</html>